<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>总部主推任务列表</title>
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/platform.css" />
        <link rel="stylesheet" href="css/table.css" />
        <link rel="stylesheet" href="js/ui/jquery-ui.min.css" />
        <link rel="stylesheet" href="css/mainpush.css" />
        <style type="text/css">
        	.u-multiform .column .cell{margin-right:30px;}
        	.temp-download{font-size:12px;}
        	.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{
        		width:40px;height:20px;margin-right:10px;
        	}
        	#error{font-size:12px;line-height:30px;max-height:420px;overflow:auto;padding:10px;
        		border:1px solid #FF3311;color:#ff4400;box-shadow:1px 1px 10px #F05010;display:none;
        	}
        	
        	.loadP{width:100px;height:30px;line-height:30px;margin-left:40px;font-size:14px;color:#fff;}
        	dot { display: inline-block;  width: 3ch; text-indent: -1ch;
        		  vertical-align: bottom;  overflow: hidden;
       			  animation: dot 3s infinite step-start both;
       			  font-family: Consolas, Monaco, monospace;
    			}
    		@keyframes dot {
			    33% { text-indent: 0; }
			    66% { text-indent: -2ch; }
			}
        </style>
    </head>

    <body>
        <div class="container" >
        	<div class="header">
                <div class="u-title">新增主推任务</div>
            </div>
            <div class="cnt-box">
                <div class="u-multiform">
                    <div class="column">
                        <div class="cell tasktime">
                            <label>任务时间：</label>
                            <div class="cnt-box">
                                <input id="month" readonly="readonly" class="u-ipt" placeholder="选择年月"/>
                            </div>
                        </div>
                        <div class="cell push-goods">
	                         <button class="u-btn small import-task" onClick="importXls()">导入</button>
	                         <a href="../templete/first.xls" target="_blank" class="temp-download" >模板下载</a>
	                    </div>
                    </div>
                </div>
            </div>
            <div id="error">
            	
            </div>
           
        </div>
        <div >
            <div class="u-popup" id="popup_import">
                <div class="bg"></div>
                <div class="asTable">
                    <div class="asTableCell">
                        <div class="asCell alert import">
                            <a href="javascript:;" class="close btn-close">×</a>
                            <p class="title">选择导入文件</p>
                            <div class="container">
                                <form id="form_file" enctype="multipart/form-data" autocomplete="off" method="post">
                                    <input id="file" type="file" name="file" accept=".xls,.xlsx" id="upladFile" />
                                </form>
                            </div>
                            <div class="btn-box">
                                <button class="u-btn" onClick="uploadFile()">确定</button>
                                <button class="u-btn btn-close gray">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
	           
	           <div class="u-popup" id="popup_tips">
	                <div class="bg"></div>
	                <div class="asTable">
	                    <div class="asTableCell">
	                        <div class="asCell alert">
	                            <a href="javascript:;" class="close btn-close">×</a>
	                            <p class="title">提示</p>
	                            <div class="container">
	                                <div class="error"></div>
	                                <p></p>
	                            </div>
	                            <div class="btn-box">
	                                <button class="u-btn btn-close">确定</button>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
        </div>
        <div class="loadData"><p class="loadP">解析文件中<dot>...</dot></p></div>
        <script src="js/jquery.min.js"></script>
        <script src="js/ui/jquery-ui.min.js"></script>
        <script src="js/ui/jquery-ui.datepicker.min.js"></script>
        <script src="js/jquery.form.js"></script>
        <script src="js/platform.js"></script>
        <script src="js/DataInterface/DataInterface.js"></script>
        <script type="text/javascript">
        	PLATFORM.monthpicker("#month");
             function importXls(){
            	if($.trim($('#month').val()).length == 0){
					PLATFORM.showTips("error","请先选择月份");
					return;
	            }
             	$("#popup_import").show();
             }
             
             function uploadFile (){
             	var inputFile = '#file';
			    if(!$(inputFile).val()){
			        return;
			    }
			    var data = new FormData();
			    var m = $.trim($('#month').val());
			    data.append('firstExcel', $(inputFile)[0].files[0]);
			    data.append('month', m);
			    $("#popup_import").hide();
			    $('.loadData').show();
			    $.ajax({
			        url: DI.importFirstExcel,
			        type: 'POST',
			        data: data,
			        dataType:'json',
			        processData: false,
			        contentType: false
			    }).done(function (data) {
			    	if(data.retFlag == 1){
			    		PLATFORM.showTips("success","导入成功");
			    		window.location.href = 'tmpHqTaskList.html?month='+m;
			    	}else{
			    		var message = data.errorMessage;
			    		if(message){
			    			$('#error').show().html("1. "+message);
			    		}else{
			    			var errorList = data.data;
			    			var html = '';
			    			for(var i = 0;i<errorList.length;i++){
			    				html += (i+1)+'. '+errorList[i]+'<br/>';
			    			}
			    			$('#error').show().html(html);
			    		}
			    	}
			
			    }).fail(function(){
			        PLATFORM.showTips("error","导入失败");
			    }).always (function(){
			    	$('#file').val('');
			    	$('.loadData').hide();
			    });
			}
        </script>
	</body>
</html>
